﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="Shortcut Icon" href="../images/aecc.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../StaticFiles/element-ui/element-ui.css">
  <link rel="stylesheet" href="../StaticFiles/nprogress/nprogress.min.css">
  <link rel="stylesheet" href="../styles/vue-page-common.css">
  <script src="../Scripts/vue.min.js"></script>
  <script src="../StaticFiles/element-ui/element-ui.js"></script>
  <script src="../Scripts/axios.min.js"></script>
  <script src="../StaticFiles/nprogress/nprogress.min.js"></script>
  <script src="../Scripts/dayjs.min.js"></script>
  <script src="../Scripts/axios.config.js"></script>
  <title>MES报表维护</title>
  <style>
    .el-form--lable-top .el-form-item__label {
      font-weight: bold;
      padding-bottom: 0 !important;
    }

    .el-form-item {
      margin-bottom: 10px;
    }

    /* 表单校验成功反馈图标 */
    .el-icon-circle-check {
      color: #67c23a;
    }

    .el-dialog__body {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak v-on:keyup.enter="getData">
    <!-- 报表标题 -->
    <vue2-report-header :title="'MES报表维护'"></vue2-report-header>
    <div style="padding: 10px;">
      <!-- 查询条件 -->
      <el-form :inline="true" :model="queryInfo" ref="queryInfoRef" style="margin: 10px" :label-position="'left'"
        :disabled="!isLegel">
        <el-form-item label="报表类型:">
          <el-select v-model="queryInfo.pagetype" palaceholder="请选择" filterable style="width:120px;" clearable>
            <el-option :lable="'报表'" :value="'报表'"></el-option>
            <el-option :lable="'看板'" :value="'看板'"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="报表名称:">
          <el-autocomplete v-model.trim="queryInfo.pagename" placeholder="请输入报表名称" :trigger-on-focus="false"
            style="width:240px;" :fetch-suggestions="getReportPageNameAsync" :value-key="'pagename'" :debounce="500">
          </el-autocomplete>
        </el-form-item>

        <el-form-item label="报表路径:">
          <el-autocomplete v-model.trim="queryInfo.pageurl" placeholder="请输入报表路径" :trigger-on-focus="false"
            style="width:400px;" :fetch-suggestions="getReportPageUrlAsync" :value-key="'pageurl'" :debounce="500">
          </el-autocomplete>
        </el-form-item>

        <el-form-item label="分厂:">
          <el-select v-model="queryInfo.factoryid" placeholder="请选择分厂" clearable filterable
            @change="bindSearchWorkcenter" style="width: 160px;">
            <el-option v-for="f in factoryList" :key="f.factoryid" :label="f.factoryname" :value="f.factoryid">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="工区">
          <el-select v-model="queryInfo.workcenterid" placeholder="请选择工区" clearable filterable style="width: 160px;">
            <el-option v-for="w in searchWorkcenterList" :key="w.workcenterid" :label="w.workcentername"
              :value="w.workcenterid">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="getData">查询</el-button>
          <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="addDialogVisible = true"
            :disabled="!isLegel">增加
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 表格 -->
      <el-table v-loading="loading" v-loading.fullscreen.lock="loading" element-loading-text="数据加载中"
        element-loading-background="rgba(0,0,0,0.8)" :data="dataList" stripe border show-overflow-tooltip>
        <el-table-column type="index" width="40"></el-table-column>
        <el-table-column label="操作" width="130">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.pageid)">
            </el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.pageid)">
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="报表id" prop="pageid" width="150" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="报表名称" prop="pagename" width="180"></el-table-column>
        <el-table-column label="报表路径" prop="pageurl">
        </el-table-column>
        <el-table-column label="类型" prop="pagetype" width="70">
          <template slot-scope="scope">
            <el-tag :type="scope.row.pagetype === '报表' ? 'primary' : 'danger'">{{scope.row.pagetype}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="分厂" prop="factoryname" width="120">
        </el-table-column>
        <el-table-column label="工区" prop="workcentername" width="120">
        </el-table-column>
        <el-table-column label="启用状态" prop="status" width="100">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" @change="changeStatus(scope.row)" active-text="启用" inactive-text="">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="创建人" prop="createperson" width="80">
          <template slot-scope="scope" v-if="scope.row.createperson">
            <el-tag>{{ scope.row.createperson }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建日期" prop="createdate" width="100" :formatter="splitDate">
        </el-table-column>
        <el-table-column label="修改人" prop="modifyperson" width="80">
          <template slot-scope="scope" v-if="scope.row.modifyperson">
            <el-tag>{{ scope.row.modifyperson }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="修改日期" prop="modifydate" width="100" :formatter="splitDate"></el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.currentPage" :page-sizes="[10,20,50]" :page-size="queryInfo.pageSize"
        layout="prev,pager,next,jumper,sizes,total" :total="total" :disabled="!isLegel">
      </el-pagination>

      <!-- 回到顶部 -->
      <el-backtop></el-backtop>

      <!-- 新增 弹出窗 -->
      <el-dialog title="添加报表" :visible.sync="addDialogVisible" width="50%" @close="addDialogClose"
        :close-on-click-modal="false" :close-on-press-escape="false">
        <el-form :model="addForm" :rules="formRule" ref="addFormRef" :inline="true" :label-position="'top'"
          lable-width="100px" status-icon>
          <el-form-item label="报表类型" prop="pagetype">
            <el-select v-model="addForm.pagetype" palaceholder="请选择" filterable style="width:217px;" clearable>
              <el-option :lable="'报表'" :value="'报表'"></el-option>
              <el-option :lable="'看板'" :value="'看板'"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="分厂">
            <el-select v-model="addForm.factoryid" placeholder="请选择分厂" clearable filterable style="width:217px;"
              @change="bindAddFormWorkcenter">
              <el-option v-for="f in factoryList" :key="f.factoryid" :label="f.factoryname" :value="f.factoryid">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="工区">
            <el-select v-model="addForm.workcenterid" placeholder="请选择工区" clearable filterable style="width:217px;">
              <el-option v-for="w in addFormWorkcenterList" :key="w.workcenterid" :label="w.workcentername"
                :value="w.workcenterid">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="是否新增">
            <el-select v-model="addForm.isnew" placeholder="请选择是否新增" clearable filterable style="width:217px;">
              <el-option :key="'是'" :label="'是'" :value="1"></el-option>
              <el-option :key="'否'" :label="'否'" :value="0"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="报表名称" prop="pagename">
            <el-input v-model.trim="addForm.pagename" style="width:680px;"></el-input>
          </el-form-item>

          <el-form-item label="报表路径" prop="pageurl">
            <el-input v-model.trim="addForm.pageurl" style="width:680px;"></el-input>
          </el-form-item>
        </el-form>
        <!-- 弹出窗底下按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="addReportInfo" size="small" :disabled="addBtnDisabled">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 修改 弹出窗 -->
      <el-dialog title="修改报表信息" :visible.sync="editDialogVisible" width="50%" @close="editDialogClose"
        :close-on-click-modal="false" :close-on-press-escape="false">
        <el-form :model="editForm" :rules="formRule" ref="editFormRef" :inline="true" :label-position="'top'"
          lable-width="100px" status-icon>
          <el-form-item label="唯一id">
            <el-input v-model="editForm.pageid" disabled style="width:217px;"></el-input>
          </el-form-item>

          <el-form-item label="创建人">
            <el-input v-model="editForm.createperson" disabled style="width:217px;"></el-input>
          </el-form-item>

          <el-form-item label="创建时间">
            <el-input v-model="editForm.createdate" disabled style="width:217px;"></el-input>
          </el-form-item>

          <el-form-item label="报表类型" prop="pagetype">
            <el-select v-model="editForm.pagetype" palaceholder="请选择" filterable style="width:217px;" clearable>
              <el-option :lable="'报表'" :value="'报表'"></el-option>
              <el-option :lable="'看板'" :value="'看板'"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="分厂">
            <el-select v-model="editForm.factoryid" placeholder="请选择分厂" clearable filterable style="width:217px;"
              @change="bindEditFormWorkcenter">
              <el-option v-for="f in factoryList" :key="f.factoryid" :label="f.factoryname" :value="f.factoryid">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="工区">
            <el-select v-model="editForm.workcenterid" placeholder="请选择工区" clearable filterable style="width:217px;">
              <el-option v-for="w in editFormWorkcenterList" :key="w.workcenterid" :label="w.workcentername"
                :value="w.workcenterid">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="是否新增">
            <el-select v-model="editForm.isnew" placeholder="请选择是否新增" clearable filterable style="width:217px;">
              <el-option :key="'是'" :label="'是'" :value="1"></el-option>
              <el-option :key="'否'" :label="'否'" :value="0"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="报表名称" prop="pagename">
            <el-input v-model.trim="editForm.pagename" style="width:680px;"></el-input>
          </el-form-item>

          <el-form-item label="报表路径" prop="pageurl">
            <el-input v-model.trim="editForm.pageurl" style="width:680px;"></el-input>
          </el-form-item>
        </el-form>
        <!-- 弹出窗底下按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="editReportInfo" size="small" :disabled="updateBtnDiasbled">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>

  <script type="module">
    import { getParams, fetchSuggestion } from '../Scripts/hooks/useCommonMethod.js'
    import { splitDate } from '../Scripts/hooks/format.js'
    import Vue2ReportHeader from '../Scripts/components/Vue2ReportHeader.js'
    const app = new Vue({
      el: '#app',
      components: { Vue2ReportHeader },
      data: {
        splitDate,
        loading: false,
        total: 0,
        factoryList: [],
        workcenterList: [],//所有工区
        addFormWorkcenterList: [],//增加-弹出框工区列表
        editFormWorkcenterList: [],//编辑-弹出框工区列表
        searchWorkcenterList: [],//查询区-工区列表
        queryInfo: {
          pagename: '',//报表名称
          pagetype: '',
          pageurl: '',
          factoryid: '',
          workcenterid: '',
          currentPage: 1,//当前页
          pageSize: 10//每页显示条数
        },
        employeeid: '',
        isLegel: true,
        dataList: [],
        addDialogVisible: false,//添加--弹出框默认隐藏
        addForm: {},
        editDialogVisible: false,//编辑--弹出框默认隐藏
        editForm: {},
        //表单校验规则
        formRule: {
          pagename: [{ required: true, message: '报表名称不能为空', trigger: 'blur' }],
          pageurl: [{ required: true, message: '报表路径不能为空', trigger: 'blur' }],
          pagetype: [{ required: true, message: '请选择报表类型', trigger: 'change' }]
        },
        addBtnDisabled: false,
        updateBtnDiasbled: false
      },
      methods: {
        getReportPageNameAsync(value, callback) {
          fetchSuggestion({ actionName: 'getReportPageAsync', name: 'pagename', value, callback, triggerLength: 1 })
        },
        getReportPageUrlAsync(value, callback) {
          fetchSuggestion({ actionName: 'getReportPageAsync', name: 'pageurl', value, callback, triggerLength: 1 })
        },
        //查询数据
        async getData() {
          this.loading = true;
          const { data: { data, meta, total } } = await axios.post('../handler/report/ReportPageMaint.ashx?action=getData', {
            ...this.queryInfo,
            type: 'getData'
          })
          this.loading = false;
          if (meta.status === 500) {
            return this.$message.error(meta.msg);
          }
          this.dataList = data.map(item => {
            return { ...item, status: item.status === 1 }; //将【启用状态】由字符串变更为布尔值
          })
          this.total = total;
        },
        //显示编辑弹出框
        async showEditDialog(pageid) {
          const { data: { data, meta, total } } = await axios.post('../handler/report/ReportPageMaint.ashx?action=getPageByid', {
            type: 'getPageByid',
            pageid: pageid
          });

          if (meta.status === 500) {
            return this.$message.error(meta.msg);
          }
          this.editDialogVisible = true;
          this.editForm = data[0];
          this.editFormWorkcenterList = [{
            workcenterid: data[0].workcenterid,
            workcentername: data[0].workcentername
          }];
        },
        //删除
        async deleteHandler(pageid) {
          // 弹框询问用户是否删除数据
          const confirmResult = await this.$confirm('将永久删除该报表, 此操作无法撤销，请确认是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err => err)

          // 如果用户点击了【确定】，则返回值为字符串 confirm ,如果用户取消删除，则返回值为字符串 cancel
          if (confirmResult !== 'confirm') {
            return this.$message.info('已取消删除!')
          }

          const { data: { data, meta, total } } = await axios.post('../handler/report/ReportPageMaint.ashx?action=deletePage', {
            type: 'deletePage',
            pageid: pageid
          });

          if (meta.status === 500) {
            return this.$message.error(meta.msg);
          }

          if (total > 0) {
            this.$message.success('删除成功!');
            this.getData();
          } else {
            return this.$message.error('删除失败!');
          }
        },
        //更新状态
        async changeStatus(row) {
          // 更新启用状态前确认
          const confirmResult = await this.$confirm('是否切换该报表启用状态?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err => err)

          // 取消切换
          if (confirmResult !== 'confirm') {
            row.status = !row.status;
            return this.$message.info('已取消切换!')
          }

          const { data: { data, meta, total } } = await axios.post('../handler/report/ReportPageMaint.ashx?action=updateStatus', {
            type: 'updateStatus',
            pageid: row.pageid,
            status: row.status,
            employeeid: this.employeeid
          });

          if (meta.status === 500) {
            return this.$message.error(meta.msg);
          }

          if (total > 0) {
            this.$message.success('报表启用状态切换成功');
            this.getData();
          } else {
            return this.$message.error('报表启用状态切换失败');
          }
        },
        //新增 对话框点击确定
        addReportInfo() {
          this.$refs["addFormRef"].validate(async (valid) => {
            if (valid) {
              //防止重复点击
              this.addBtnDisabled = true;
              const { data: { data, meta, total } } = await axios.post('../handler/report/ReportPageMaint.ashx?action=addPage', {
                type: 'addPage',
                ...this.addForm,
                employeeid: this.employeeid
              });

              if (meta.status === 500) {
                return this.$message.error(meta.msg);
              }

              if (total > 0) {
                this.$message.success('新增成功');
                this.getData();
                this.addDialogVisible = false;
              } else {
                return this.$message.error('新增失败')
              }
            }
          })
        },
        //编辑 对话框点击确定
        editReportInfo() {
          this.$refs["editFormRef"].validate(async (valid) => {
            if (valid) {
              //防止重复点击
              this.updateBtnDiasbled = true;
              const { data: { data, meta, total } } = await axios.post('../handler/report/ReportPageMaint.ashx?action=update', {
                type: 'update',
                ...this.editForm,
                employeeid: this.employeeid
              });

              if (meta.status === 500) {
                return this.$message.error(meta.msg);
              }

              if (total > 0) {
                this.$message.success('修改成功');
                this.getData();
                this.editDialogVisible = false;
              } else {
                this.$message.error('修改失败');
              }
            }
          })
        },
        //新增 弹出框关闭
        addDialogClose() {
          this.$refs["addFormRef"].resetFields();
          this.addBtnDisabled = false;
        },
        //编辑 弹出框关闭
        editDialogClose() {
          this.$refs["editFormRef"].resetFields();
          this.updateBtnDiasbled = false;
        },
        //监听 页码值 改变的事件
        handleCurrentChange(newPage) {
          this.queryInfo.currentPage = newPage;
          this.getData();
        },
        //监听 pagesize 改变的事件
        handleSizeChange(newSize) {
          this.queryInfo.pageSize = newSize;
          this.getData();
        },
        //查询工区
        async getWorkcenter() {
          const { data: { data, meta, total } } = await axios.post('../handler/report/ReportPageMaint.ashx?action=getWorkcenter', {
            type: 'getWorkcenter'
          });

          this.workcenterList = data;//缓存所有工区信息
          let obj = {};
          let f = data.map(item => {
            return {
              factoryid: item.factoryid,
              factoryname: item.factoryname
            }
          })
          //缓存去重后的分厂信息
          this.factoryList = f.reduce(function (item, next) {
            obj[next.factoryid] ? '' : obj[next.factoryid] = true && item.push(next);
            return item;
          }, []);
        },
        //绑定 【添加】 对话框中的工区下拉框
        bindAddFormWorkcenter(val) {
          if (this.addForm.workcenterid) {
            this.addForm.workcenterid = null;
          }
          if (val) {
            this.addFormWorkcenterList = this.workcenterList.filter(item => {
              return item.factoryid === val;
            })
          }
        },
        //绑定 【编辑】 对话框中的工区下拉框
        bindEditFormWorkcenter(val) {
          this.editForm.workcenterid = null;
          if (val) {
            this.editFormWorkcenterList = this.workcenterList.filter(item => {
              return item.factoryid === val;
            })
          }
        },
        //绑定 【查询区】 对话框中的工区下拉框
        bindSearchWorkcenter(val) {
          if (this.queryInfo.workcenterid) {
            this.queryInfo.workcenterid = null;
          }
          if (val) {
            this.searchWorkcenterList = this.workcenterList.filter(item => {
              return item.factoryid === val;
            })
          }
        },
        async validateUser() {
          const { data: { meta } } = await axios.post('../handler/report/ReportPageMaint.ashx?action=validate', {
            type: 'validate',
            employeeid: this.employeeid
          });

          if (meta.status !== 200) {
            this.isLegel = false;
          }
        }
      },
      async created() {
        if (!getParams("uid")) {
          this.isLegel = false;
          return this.$notify.error({ title: '错误', message: '该用户无权使用该功能!' });
        }
        this.employeeid = getParams("uid");
        const { data: { data, meta, total } } = await axios.post('../handler/report/UserGrantAuthorization.ashx?action=isSuperAdmin', {
          type: 'isSuperAdmin',
          employeeid: getParams('uid')
        });

        if (total < 1) {
          this.isLegel = false;
          return this.$notify.error({ title: '错误', message: '该用户无权使用该功能!' });
        }

        this.getData();
        this.getWorkcenter();
      },
      watch: {
        queryInfo: { handler() { this.queryInfo.currentPage = 1 }, deep: true }
      }
    })
  </script>
</body>

</html>